<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IJUFE</title>

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background:#2b22ca;
}

/* 页眉/Blog 标题 */
.header {
  padding: 30px;
  text-align: center;
  background: rgb(190, 170, 172);
}

.header h1 {
  font-size: 50px;
}

/* 设置上导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: rgb(155, 150, 254);
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #06110a;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: rgb(251, 187, 222);
  color: rgb(22, 4, 4);
}

/* 创建两个不相等的彼此并排的浮动列 */
/* 左列 */
.leftcolumn {   
  float: left;
  width: 50%;
}

/* 右列 */
.rightcolumn {
  float: left;
  width: 50%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* 伪图像 */
.fakeimg {
  background-color: rgb(227, 199, 142);
  width: 100%;
  padding: 20px;
}

/* 为文章添加卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: rgb(232, 175, 175);
  margin-top: 20px;
}

/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>真新镇少年小智（サトシSatoshi）的25年</h1>
  <p>Pokemon fans</p>
</div>

<div class="topnav">
  <a href="https://baike.baidu.com/link?url=Ovt8wSgOY92EUdg5iBVhyMgep-a5_e-gYK5zbEiMW6VFNInVyffntts07xzUgYmER6pa0rEt0iGsQqvYBB9t0XIF3eYlED2UD7nBJWdRc1e#7">自我介绍</a>
  <a href="https://baike.baidu.com/link?url=rk-hh0TVsZipCTTeEP-qMt6kQ-HzRp6vRmWlw1ewKRSxhH94nrydwR598phAI00js5GJa_8K_fSYtmJN_0TJX2_375-SpDiNGZk4_5_N8fo_fgQ-WJ7yjCxE5qY5OfPw">小智的家乡</a>
</div>
<div class="row">
    <div class="leftcolumn">
      <div class="card">
        <h2>小智的梦想</h2>
        <h5>神奇宝贝大师</h5>
        <div class="fakeimg" style="height:70px;">小智的背景<p>小智的原型基于游戏系列第一世代作品中的游戏主角赤红。
            </p></div>
        <div class="fakeimg" style="height:70px;">小智的日文名（サトシSatoshi）来自日语智satoshi（智慧或理智）。是以原案企划者田尻智命名的。 其中文名来自日文名汉字。</div>
      </div>
      <div class="card">
        <h2>参赛记录</h2>
        <h5>宝可梦联盟与对战开拓区</h5>
        <div class="fakeimg" style="height:70px;">最好成绩为八大师冠军</div>
        <p>1.石英大会16强</p>
        <p>2.橘子联盟冠军（名誉训练家）</p>
        <p>3.白银大会8强</p>
        <p>4.彩幽大会8强</p>
        <p>5.对战开拓区成功称霸</p>
        <p>6.铃兰大会四强</p>
        <p>7.桧桓大会八强</p>
        <p>8.密阿雷大会亚军</p>
        <p>9.玛纳罗大会冠军-->获得八大师参赛机会</p>
      </div>
    </div>
    <div class="rightcolumn">
      <div class="card">
        <h2>八大师夺冠阵容</h2>
        <div class="fakeimg" style="height:150px;"><p>MVP 皮神</p><p>耿鬼 路卡利欧 快龙 鳃鱼龙 葱油兵</p></div>
      </div>
      <div class="card">
        <h3>我最喜欢的三个地区</h3>
        <div class="fakeimg" style="height:50px;"><p>1.神奥地区</p></div>
        <div class="fakeimg" style="height:50px;"><p>2.成都地区</p></div>
        <div class="fakeimg" style="height:70px;"><p>3.关都地区</p></div>
      </div>
      <div class="card">
      <h3>我最喜欢的女主</h3>
      <p>瑟玲娜</p>
    </div>
  </div>
</div>
<div class="footer">
    <h2>小智的故事还远远不会结束</h2>
  </div>
  
  </body>
  </html>
